<template>
  <div class="warp container">
  	<div class="header">
      <div class="return-icon" @click="back();"></div>
      <div class="name">玄幻神作</div>
      <router-link :to="{path:'/search'}" class="search-icon"></router-link>
    </div>

    <div class="nav-tab">
    	<div class="tt">
    		<span class="active">热门</span>
    		<span>最新</span>
    	</div>
    	<div class="tab-list">
    		<span class="active">全部</span>
    		<span>东方玄幻</span>
    		<span>东方玄幻</span>
    	</div>
    </div>
    <div class="book-list">
    	<router-link :to="{path:'/bookdetails'}" v-for="item in list">
            <div class="layout1-box">
              <img src="../assets/images/book.png" class="item-l">
              <div class="item-r">
                  <h3 class="item-tt">标题</h3>
                  <p class="item-desc">内容s内容s内容s内容s内容s内容s内容s内容s内容s内容s内容s内容s内容s内容s内容s</p>
                  <p class="item-info">
                    <span>作者</span>
                    <span class="label">
                      <i class="blue" v-for="label in item.label">{{label}}</i>
                      <i class="green">标签</i>
                    </span>
                  </p>
              </div>
            </div>
        </router-link>
    </div>

    <!-- 底部 -->
    <web-footer active="home"></web-footer>
  </div>
</template>
<script>
		import bookDefaultImg from '@/assets/images/book.png';
		import WebFooter from '../PUBLIC/footer.vue';
    export default {
    	name: 'godBook',
    	components: {
    		WebFooter
	    },
    	data () {
      		return {
      			list:['','','','','','','','']
	      	}
	    },
	    mounted(){

	    },
	    methods:{
	      	back(){
	        	this.$router.go('-1')
	      	},
          menuToggle(){
            this.menuShow = !this.menuShow;
          }
	    }
  	}
</script>
<style lang="scss" scoped>
	.book-list{
		padding:30px 30px 30px;
		a{
			display: block;
			margin-bottom:50px;
		}
	}
	.nav-tab{
		padding:0 30px;
		.tt{
			line-height:95px;
			font-size:28px;
			span{
				position: relative;
				margin-right:50px;
				display: inline-block;
			}
			.active{
				color:#3471ff;
				&:after{
					content:'';
					position: absolute;
					bottom:10px;
					left:10%;
					width:80%;
					height:5px;
					display: block;
					background-color:#3471ff;
				}	
			}
		}
		.tab-list{
			margin-top:20px;
			span{
				width:140px;
				text-align: center;
				line-height:50px;
				border-radius:50px;
				display: inline-block;
				margin-bottom:35px;
				margin-right:32px;
				font-size: 28px;
				&.active{
					background:#3471ff;
					color:#fff;
				}
			}
		}
	}
</style>
